<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>实名认证</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
        <link rel="stylesheet" href="/assets/libs/layui/css/layui.css"  media="all">
        <style>
            .layui-upload-img{
                width: 92px;
                height: 92px;
                margin: 10px 0 10px 18%;
                border: 0.1px solid gray;
            }
            .upload {
                position: absolute;
                top: 10%;
                width: 100%;

            }
            .layui-upload {
                width: 100px;
                margin-left: 33%;
            }
            .layui-btn {
                width: 126px;
            }
            .layui-upload-list{
                margin:0 auto;
            }
            .blue-btn{
                margin-top: 55%;
                background-color: rgba(0, 0, 255, 0.71);
                display: inline-block; 
                height: 38px; 
                width: 126px;
                line-height: 38px;
                padding: 0 18px; 
                color: #fff; 
                white-space: nowrap; 
                text-align: center; 
                font-size: 14px; 
                border: none; 
                border-radius: 2px; 
                cursor: pointer; 
                opacity: .9; 
                filter: alpha(opacity=90);
            }
            body {
                background:rgba(1, 95, 237, 0.15);
            }
            .footer{
                position:fixed;
                bottom:5%;
                width: 100%;
            }
            .footer > p{
                width: 90%;
                margin: 0 auto;
                color: rgb(206, 15, 15);
            }
             .footer > p:nth-child(2){
                text-indent:2em;
            }
        </style>
    </head>
    <body>
        <div class="upload">
            <div class="layui-upload">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="image1" src="/assets/img/xj.png">
                    <p class="text"></p>
                </div>
                <button type="button" class="layui-btn" id="img1">上传身份证</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="image2" src="/assets/img/xj.png">
                    <p id="text"></p>
                </div>
                <button type="button" class="layui-btn" id="img2">上传手持身份证</button>
                <button type="button" class=" blue-btn submit" >提交</button>
            </div>   
        </div>
        <div class="footer">
            <p>温馨提示：</p>
            <p>根据国家工信部要求,必须提供使用者身份真实信息,上传信息后我们将在12小时内为您开通设备。</p>
        </div>
        <script src="/assets/libs/layui/layui.js" charset="utf-8"></script>
        <script>
            var user = {$user | json_encode};
            layui.use('upload', function () {
                var $ = layui.jquery, upload = layui.upload;
                if (user && user.status == 1) {
                    $('button').on('click', function () {
                        layer.msg('正在审核中');
                        return false;
                    })
                } else {
                    upload.render({
                        elem: '#img1'
                        , url: '/index/ajax/upload/'
                        , exts: 'png|jpg|jpeg'
                        , size: 20480 //限制文件大小，单位 KB
                        , done: function (res) {
                            $('#image1').attr('src', res.data.url)
                            if (res.code != 1 && res.msg) {
                                return layer.msg('上传失败');
                            }
                        }
                        , error: function () {
                            //演示失败状态，并实现重传
                            return layer.msg('上传失败');
                        }
                    });
                    upload.render({
                        elem: '#img2'
                        , url: '/index/ajax/upload/'
                        , exts: 'png|jpg|jpeg'
                        , size: 20480 //限制文件大小，单位 KB
                        , done: function (res) {
                            $('#image2').attr('src', res.data.url)
                            if (res.code != 1 && res.msg) {
                                return layer.msg('上传失败');
                            }
                        }
                        , error: function () {
                            return layer.msg('上传失败');
                        }
                    });
                    $('.submit').on('click', function () {
                        card = $('#image1').attr('src'), handheld_card = $('#image2').attr('src');
                        console.log(card);
                        if (card == '' || card == undefined || card == '/assets/img/xj.png') {
                            layer.msg('请上传身份证');
                            return false;
                        }
                        if (handheld_card == '' || handheld_card == undefined || handheld_card == '/assets/img/xj.png') {
                            layer.msg('请上传手持身份证');
                            return false;
                        }

                        $.post('/index/user/uploadCard', {'card': card, 'handheld_card': handheld_card}, function (rs) {
                            if (rs.code == 1) {
                                $('.submit').prop('disabled', true);
                                layer.msg('提交成功', function () {
                                    location.reload();
                                });
                            } else {
                                layer.msg('提交失败');
                            }
                        })
                    })
                }
            });
        </script>

    </body>
</html>
